<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="CYW">
    <title></title>
    <style>
          a{
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }
        *{
            box-sizing: border-box;
        }
        .box{
            display: flex;
        }
        .box>div{
            margin-left: 10px;
            position: relative;
        }
        a{
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url(./img/star.png);
        }
        a.active{
            background-position: 0 -28px;
        }
        .box>div:hover .pingjia{
            display: block;
        }
        .pingjia{
            border: 1px solid red;
            font-size: 12px;
            position: absolute;
            left:0;
            top: 20px;
            width: 120px;
             display: none; 
        }
      
    </style>
</head>
<body>
        <div class="box">
        <span>宝贝与描述相符</span>

        <div class="stars">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <div class="pingjia">五星好评</div>
        </div>

        <span class="result"></span>

    </div>
     <script src="jquery.js"></script>
</body>
</html>
<script>
    
 var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];

  function showStar(count){
     $('a').each(function(){
               if($(this).index() < count){
                    $(this).addClass('active')
               }else{
                   $(this).removeClass('active')
               }
         });
   }

    var score;
    // 遍历a 
      $('a').each(function(){
      $(this).hover(function(){
        // hover时展示星星数 索引值+1 
        showStar($(this).index() + 1);
        // console.log($(this).index()+1)
        // 显示评价框
        $('.pingjia').show();
        $('.pingjia').css('left',$(this).position().left-50);
        var amsg = msg[$(this).index()];
        $('.pingjia').html('<strong style="color:red">'+ ($(this).index()+1) + '分 '+ 
            amsg.split('|')[0] + 
            '</strong><br>'+
            amsg.split('|')[1]);

        // 鼠标离开时特效
         },function(){
        //   未点击的星星 隐藏评价框
        //   $('.pingjia').hide();
         //未点击 离开时 星星归0   
          showStar(score)
        //   console.log(count)

        })
    
         $('a').click(function(){
            score = $(this).index()+1;
            var amsg = msg[$(this).index()];
            $('.result').html('<strong style="color:red">'+($(this).index()+1)+'分'+'</strong>'+amsg.split('|')[1]);
      });

      });
  



    
  
            

</script>